<script setup>
import {ref,defineProps} from "vue";

const checked = ref(['设置答案', '正确答案']);
const props=defineProps(['practice','radioOptions','checkboxOptions','judgeOptions'])
// 单选选项被点击
const handleRadioChange = (options,index) => {
  for (const option of options) {
    option.checked = 0;
  }
  options[index].checked = 1;
}





</script>

<template>
  <el-form-item label="参考答案" v-if="practice.type ==3||practice.type==4">
    <el-input
        v-model="practice.answer"
        style="width: 800px"
        :rows="8"
        type="textarea"
        placeholder="请输入参考答案内容"
    />
  </el-form-item>
  <!--单选-->
  <el-form-item label="题目选项" v-if="practice.type == 0">
    <el-radio-group
        v-model="practice.answer"
        size="large"
    >
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in radioOptions" :key="index">
          <el-radio :value="option.value" @change="handleRadioChange(radioOptions,index)" >
            {{ option.value }}
            <el-input placeholder="请输入选项内容"
                      style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;margin-top: 20px"
                      v-model="radioOptions[index].content"
            />
            <span style="width: 20px">
              {{ checked[option.checked] }}
            </span>
          </el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
  </el-form-item>
  <!--    多选题-->
  <el-form-item label="题目选项" v-if="practice.type == 1">
    <el-checkbox-group v-model="practice.answer" size="large">
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in checkboxOptions" :key="index" style="margin: 10px 0">
          <el-checkbox :label="option.value" :value="option.value"
                       @click="checkboxOptions[index].checked ===0 ? checkboxOptions[index].checked = 1 : checkboxOptions[index].checked = 0;">
            {{ option.value}}
            <el-input placeholder="请输入选项内容"
                      style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;"
                      v-model="checkboxOptions[index].content"
            />
            <span style="width: 20px">
              {{ checked[option.checked] }}
            </span>
          </el-checkbox>
        </el-col>
      </el-row>
    </el-checkbox-group>
  </el-form-item>
  <!--判断-->
  <el-form-item label="题目选项" v-if="practice.type == 2">
    <el-radio-group
        v-model="practice.answer"
        size="large"
    >
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in judgeOptions" :key="index">
          <el-radio :value="option.value" @change="handleRadioChange(judgeOptions,index)">
            {{ option.value }}
<!--            <el-input placeholder="请输入选项内容"-->
<!--                      style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;"-->
<!--                      v-model="judgeOptions[index].content"-->
<!--            />-->
            <span style="width: 20px">
              {{ checked[option.checked] }}
            </span>
          </el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
  </el-form-item>
</template>

<style scoped lang="less">

</style>